<!DOCTYPE html>
<meta charset="UTF-8">
<title>instant search demo</title>
<link rel="import" href="../../common/layout.html">

<main ng-app="demoApp" ng-controller="DemoCtrl as ctrl">
	<div class="demo">
		<h3>local data</h3>
		<div ng-bind="ctrl.result1 || {} | json"></div>
		<instant-search
				datalist="ctrl.datalist"
				on-search="ctrl.onSearch(datalist,context)"
				on-select="ctrl.onSelect1(item,context)"
				options="ctrl.options1"></instant-search>
	</div>
	<div class="demo">
		<h3>remote data</h3>
		<div ng-bind="ctrl.result2 || {} | json"></div>
		<instant-search
				datalist="ctrl.datalist"
				on-search="ctrl.onSearch(datalist,context)"
				on-select="ctrl.onSelect2(item,context)"
				options="ctrl.options2"></instant-search>
	</div>
</main>

<script src="/components.js"></script>
<script>
	angular.module('demoApp', ['ccms.components'])
		.controller('DemoCtrl', function($scope) {

			this.datalist = [
				{title: '上海', value: 'sh'},
				{title: '北京', value: 'bj'},
				{title: '深圳', value: 'sz'},
				{title: '广州', value: 'gz'},
				{title: '南京', value: 'nj'}
			];
			this.options1 = {
				placeholderText: '请输入区域名称',

				valueField: 'value',
				displayField: 'title',

				// 本地过滤顺序
				localFilterFields: ['value', 'title'],
			};
			this.options2 = {
				placeholderText: '请输入区域名称',

				// 使用远程数据源
				url: '/instant-search/',

				valueField: 'value',
				displayField: 'title',

				// 服务端搜索参数名
				//remoteSearchParamKey: 'value',
			};
			this.onSelect1 = (item, context) => {
				this.result1 = { item, context };
				console.log('onSelect:', this.result1);
			};
			this.onSelect2 = (item, context) => {
				this.result2 = { item, context };
				console.log('onSelect:', this.result2);
			};

			this.onSearch = (datalist, context) => {
				console.log('onSearch:', {datalist, context});
			}
		});
</script>

